<template>
  <div class="app-container">
      <el-card>
        <div slot="header" >
          <span>
            <el-form :inline="true" :model="filters">
              <el-form-item label="名称">
                <el-input v-model="filters.name" placeholder="名称" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
              </el-form-item>

              <el-form-item label="代码">
                <el-input v-model="filters.code" placeholder="代码" style="min-width: 240px;" @keyup.enter.native="handleSearch"></el-input>
              </el-form-item>

              <el-form-item>
                <el-button type="success" icon="el-icon-search" v-show="isAuth('sys:department:search')" @click="handleSearch">查询</el-button>
                <router-link :to="{path:'/editDepartment',query:{cache: true}}">
                  <el-button type="primary" v-show="isAuth('sys:department:add')"  icon="el-icon-plus" >新增</el-button>
                </router-link>
              </el-form-item>
            </el-form>
          </span>
        </div>
        <div>


          <tree-table @rowDblclick="rowClickHandle" :height="500" v-loading="loading" :columns="columns" :data="departments"  border>
            <el-table-column prop="createdBy" label="创建人" align="center" width="100" >
            </el-table-column>
            <el-table-column prop="createdTime" label="创建时间" align="center" width="180" >
            </el-table-column>
            <el-table-column prop="lastModifiedBy" label="修改人" align="center" width="100"  >
            </el-table-column>
            <el-table-column prop="lastModifiedTime" label="修改时间" align="center" width="180">
            </el-table-column>
            <el-table-column prop="disabled" label="是否可用"  width="100" align="center">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.disabled" disabled> </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              label="操作" v-if="isAuth('sys:department:delete') || isAuth('sys:department:update')"
              min-width="210">
              <template slot-scope="scope">

                 <el-button size="mini" v-show="isAuth('sys:department:delete')"
                            @click="deleteCurrentRow(scope.row)"
                            :type="scope.row.disabled ? 'danger': 'success'"
                            :icon="scope.row.disabled ? 'el-icon-close':'el-icon-check'"
                            circle></el-button>
                 <router-link :to="{path:'/editDepartment',query:{id: scope.row.id,cache: true}}">
                   <el-button v-show="isAuth('sys:department:update')" size="mini" type="primary" icon="el-icon-edit" circle></el-button>
                 </router-link>
               </template>
            </el-table-column>
          </tree-table>
        </div>
      </el-card>
  <br>

    <el-card>
      <el-collapse>
        <el-collapse-item title="组织负责人" name="0">
          <el-table size="mini"
                    border
                    ref="singleTable"
                    :data="leaders"
                    highlight-current-row>
            <el-table-column
              property="displayName"
              label="姓名"
              width="120">
            </el-table-column>
            <el-table-column
              property="phone"
              label="电话">
            </el-table-column>
            <el-table-column
              property="email"
              label="邮箱">
            </el-table-column>
            <el-table-column
              property="departmentName"
              label="组织">
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>
    </el-card>
  </div>
</template>

<script>
  import {getDepartmentListPage,disabledOrEnabled} from '@/api/sys/department'
  import {getDepartmentLeadersByDepartmentId} from '@/api/sys/user/';
  import treeTable from '@/components/TreeTable'
  import {isAuth} from '@/utils/'
  export default {
      name:'部门管理',
    components: { treeTable },
    data() {
      return {
        defaultProps: {
          children: 'children',
          label: 'name',
          id:'id',
          disabled:function (data, node) {
            if(data.disabled){
              return false;
            }else{
              return true;
            }
          }
        },
        columns: [
          {
            text: '名称',
            value: 'name',
            minWidth: 200
          },
          {
            text: '代码',
            value: 'code',
            width: 120
          }

        ],
        dialogFormVisible: false,
        filters: {
          name: '',
          code:''
        },
        defaultCheckedKeys:[],
        loading: false,
        departments:[],
        currentSelectedRow:[],
        leaders:[]
      }
    },
    methods: {
      isAuth,
      rowClickHandle(row, event){
          let that = this;
          that.leaders=[];
          if(row.leaders.length > 0){
            that.leaders = Object.assign(that.leaders,row.leaders)
              return;
          }

        getDepartmentLeadersByDepartmentId(row.id).then(function (result) {
          let {code,data} =result.data;
          if(code === 0){
            that.$message({
              type: 'success',
              message: '负责人加载成功!'
            });
          }
          data.forEach(item=>{
            that.leaders.push(item);
            row.leaders.push(item);
          })
        });

      },


      deleteCurrentRow(row){
        let that = this;
        this.$confirm(row.disabled?'确定禁用？':'确定启用？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          disabledOrEnabled({id:row.id,disabled: !row.disabled}).then(function (result) {
            let {code,msg} = result.data;
            if(code == 0){
              that.$message({
                type: 'success',
                message: '操作成功!'
              });
              that.search();

            }else{
              that.$message.error(msg);
            }

          }).catch(function (error) {
            // that.$message.error('删除失败');
          });
        }).catch(()=>{
        });
      },
      handleSearch(){
        this.search();
      },

      search() {
        let that = this;
        that.loading = true;
        getDepartmentListPage(this.filters).then(function (result) {
          let {data,code} = result.data;
          that.departments= [];
          data.forEach((item) =>{
            that.departments.push(item);
          });
          that.loading = false;
        }).catch(function (error) {

        });


      }
    },

    mounted() {
      this.search();
    }
  }
</script>

<style>

</style>
